<template>
  <j-modal :title="title" width="90%" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="null">
    <div class="content">
      <a-row type="flex">
        <a-col :flex="toggle ? '260px' : '30px'" style="margin-right: 12px; background-color: #fff">
          <a-tree checkable :tree-data="treeData" v-model:checkedKeys="checkedKeys" :defaultExpandAll="true">
            <template #title="row">
              <span v-if="row.children && row.children.length > 0">{{ row.title }}</span>
              <span v-else style="color: #1890ff" @click="indexDetail(row)">{{ row.title }}</span>
            </template>
          </a-tree>
        </a-col>
        <a-col style="flex: 1" class="con_right">
          <a-card :bordered="false" style="margin-bottom: 10px">
            <div>
              <a-steps :current="1">
                <a-step title="数据填报" description="2022-09-27 15:43:23" />
                <a-step title="提交填报" description="未提交" />
                <a-step title="区级审核" description="" />
                <a-step title="市级审核" description="" />
                <a-step title="省级审核" description="" />
              </a-steps>
            </div>
          </a-card>
          <a-card :bordered="false" title="指标信息">
            <a-form-model :model="form" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
              <a-row>
                <a-col :span="7">
                  <a-form-model-item label="指标名称" prop="indexName">
                    <a-input v-model="form.indicatorName" :disabled="isDisabled" placeholder="请输入"> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="任务量" prop="pre">
                    <a-input v-model="form.taskNumber" :disabled="isDisabled" placeholder="请输入"> </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="指标类型" prop="pre">
                    <a-input v-model="form.indicatorType" :disabled="isDisabled" placeholder="请输入"> </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="7">
                  <a-form-model-item label="采集机构" prop="indexName">
                    <a-select
                      v-model="form.collectionOragan"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="采集部门" prop="pre">
                    <a-select
                      v-model="form.collectionDepart"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="采集人" prop="pre">
                    <a-select
                      v-model="form.collectionPeople"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="7">
                  <a-form-model-item label="审核机构" prop="indexName">
                    <a-select
                      v-model="form.auditOrgan"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="审核部门" prop="pre">
                    <a-select
                      v-model="form.auditDepart"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :span="7">
                  <a-form-model-item label="审核人" prop="pre">
                    <a-select
                      v-model="form.auditPeople"
                      placeholder="请选择"
                      :disabled="isDisabled"
                      style="width: 100%"
                      allowClear
                    >
                      <a-select-option v-for="(item, key) in rangeOpts" :key="key" :value="item.value"
                        >{{ item.title }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11" class="col-2">
                  <a-form-model-item label="考核标准" prop="khbz">
                    <a-textarea v-model="form.standardAssessment" :rows="3" placeholder="请输入"></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="11" class="col-2">
                  <a-form-model-item label="指标描述" prop="khbz">
                    <a-textarea v-model="form.indicatorDescription" :rows="3" placeholder="请输入"></a-textarea>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-card>
          <a-card :bordered="false" title="数据填报">
            <!-- 操作按钮区域 -->
            <div class="table-operator" v-if="title === '数据填报详情'">
              <a-dropdown :trigger="['click']">
                <a-button icon="plus">新增</a-button>
                <template #overlay>
                  <a-menu slot="overlay">
                    <a-menu-item key="1" @click="onAdd('1')">媒体发刊</a-menu-item>
                    <a-menu-item key="2" @click="onAdd('2')">关注中国禁毒的粉丝指数排名</a-menu-item>
                    <a-menu-item key="3" @click="onAdd('3')">@中国禁毒在线发布微博情况</a-menu-item>
                    <a-menu-item key="4" @click="onAdd('4')">开展“禁毒宣传进万家”活动</a-menu-item>
                    <a-menu-item key="5" @click="onAdd('5')">开展“领导干部讲禁毒”活动</a-menu-item>
                    <a-menu-item key="6" @click="onAdd('6')">全国青少年禁毒知识竞赛活动</a-menu-item>
                    <a-menu-item key="7" @click="onAdd('7')">全国青少年毒品预防教育数字化平台注册比例</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
              <!--<a-dropdown :trigger="['click']">
                <a-button icon="edit">编辑</a-button>
                <template #overlay>
                  <a-menu slot="overlay">
                    <a-menu-item key="1" @click="onEdit('1')">媒体类别</a-menu-item>
                    <a-menu-item key="2" @click="onEdit('2')">占比类别</a-menu-item>
                    <a-menu-item key="3" @click="onEdit('3')">阅读量</a-menu-item>
                    <a-menu-item key="4" @click="onEdit('4')">地点</a-menu-item>
                    <a-menu-item key="5" @click="onEdit('5')">领导类别</a-menu-item>
                    <a-menu-item key="6" @click="onEdit('6')">答题分数</a-menu-item>
                    <a-menu-item key="7" @click="onEdit('7')">注册比例</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>-->
              <a-button icon="edit" @click="onEdit('edit')">编辑</a-button>
              <a-button type="primary" icon="delete" class="ant-btn-danger" @click="onDel">删除</a-button>
              <a-button type="primary" icon="check" @click="onSubmit">提交</a-button>
            </div>
            <!-- 表格展示 -->
            <div class="table-page-content">
              <z-table
                ref="table"
                rowKey="id"
                :showAlert="false"
                :showSelection="true"
                :loading="loading"
                :columns="columns"
                :dataSource="pageData"
                @selectedRow="onSelectedRow"
              >
                <!--操作-->
                <template slot="action" slot-scope="text, record">
                  <a-button v-if="title === '数据填报详情'" @click="onDetail('详情', record)" type="link" style="padding: 0">详情</a-button>
                  <a-button v-else @click="onDetail('审核', record)" type="link" style="padding: 0">审核</a-button>
                </template>
              </z-table>
            </div>
          </a-card>
        </a-col>
        <Add ref="add" :isInterview="true" />
      </a-row>
    </div>
  </j-modal>
</template>

<script>
import DepartTree from '@/views/sjsk/modules/departTree'
import Add from './add'
import moment from 'moment'
import Api from '@/api/sjsk/performanceService'

export default {
  components: {
    DepartTree,
    Add,
  },
  data() {
    return {
      moment,
      loading: false,
      visible: false,
      isDisabled: true,
      checkList: [],
      form: {},
      rangeOpts: [],
      isValidOpts: [],
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}`, //序号分页后连续
        },
        {
          title: '主题',
          dataIndex: 'motif',
          align: 'center',
        },
        {
          title: '媒体采集信息',
          dataIndex: 'mediaGatherInfo',
          align: 'center',
        },
        {
          title: '填报人',
          dataIndex: 'fillUser',
          align: 'center',
        },
        {
          title: '填报时间',
          dataIndex: 'fillTime',
          align: 'center',
        },
        {
          title: '审核人',
          dataIndex: 'approveUser',
          align: 'center',
        },
        {
          title: '审核时间',
          dataIndex: 'approveTime',
          align: 'center',
        },
        {
          title: '填报情况',
          dataIndex: 'fillType',
          align: 'center',
        },
        {
          title: '操作',
          width: 160,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      title:'',
      selectdetailData:'', // 列表选中的数据
      treeData: [],
      checkedKeys: [],
    }
  },
  created() {
    this.getIndexTree()
  },
  mounted() {},

  methods: {
    show(_title, _row) {
      this.title = _title;
      this.selectdetailData = _row;
      this.getDetail(_row)
      this.visible = true;
    },
    // 数据填报详情
    getDetail(_row) {
      let form = {
        dataFillId:_row.id,
      }
      this.loading = true
      Api.getDataFillDetail(form)
        .then((res) => {
          if (res.success) {
             this.pageData = res.result.sjskDataFillList;
             this.form = res.result.indicatorDataFill;
             this.$refs.table.onClearRowKeys()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 新增主题
    onAdd(_type) {
      this.$refs.add.show(_type)
    },
    onEdit(_type){
      if(!this.checkList.length){
        return this.$message.warn('请先勾选对应的记录')
      }
      if(this.checkList.length>1){
        return this.$message.warn('只能编辑一条数据')
      }
      this.$refs.add.show(_type,this.checkList)
    },
    // 提交主题
    onSubmit() {
      if(!this.checkList.length){
        return this.$message.warn('请先勾选对应的记录')
      }
      let that = this;
      that.loading = true;
      let ids = [];
      for(let el in that.checkList){
        ids.push(el.id)
      }
      Api.examineDataFillMotifSub({id:ids.join(',')})
        .then((res) => {
          if (res.success) {
            this.$message.error(res.message)
            this.getDetail(this.selectdetailData)
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 删除主题
    onDel() {
      if(!this.checkList.length){
        return this.$message.warn('请先勾选对应的记录')
      }
      let that = this;
      this.$confirm({
        title: `确定是否删除?`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.loading = true;
          let ids = [];
          for(let el in that.checkList){
            ids.push(el.id)
          }
          Api.deleteDataFillMotif({ids:ids.join(',')})
            .then((res) => {
              if (res.success) {
                this.$message.error('删除主题成功')
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {
              this.loading = false
            })
        },
      })
    },

    // 主题详情或者审核
    onDetail(_title, _row) {
      this.$refs.add.show(_title, _row)
    },
    onSelectedRow(keys) {
      this.checkList = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    // 指标详情
    indexDetail(_item) {
      // let row = this.checkIndexs.find((el) => el.gradeIndicator === _item.key)
      // console.log('row--', row)
      // this.curRow = row
      // this.formByPlan.auditOrgan = row.auditOrgan
      // this.changeOrgs(this.formByPlan.auditOrgan)
    },
    getIndexTree(){
      // this.loading = true
      // Api.getDataFillExamineListTree()
      //   .then((res) => {
      //     if (res.success) {
      //        this.treeData = res.result
      //     } else {
      //       this.$message.error(res.message)
      //     }
      //   })
      //   .finally(() => {
      //     this.loading = false
      //   })
    },
    // 关闭弹窗
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

/deep/.ant-col-7 {
  width: 28%;
}

/deep/.ant-col-4 {
  width: 16%;
}
.content {
  height: 70vh;
  overflow-y: scroll;
  .con_right {
    border-left: 1px solid #ddd;
  }
}
::v-deep .ant-card-head {
  background: #eee;
}
::v-deep .ant-card-body {
  padding-bottom: 0;
}
.col-2 {
  width: 100%;
  ::v-deep .ant-form-item-label {
    width: 8%;
  }
  ::v-deep .ant-form-item-control-wrapper {
    width: 76%;
  }
}
</style>
